import React, { useState, useEffect } from 'react'

interface DynamicDotsProps {
  title?: string
  subtitle?: string
  showProgress?: boolean
  fullscreen?: boolean // 新增：是否全屏居中显示
}

const DynamicDots: React.FC<DynamicDotsProps> = ({
  title = '正在加载',
  subtitle,
  showProgress = true,
  fullscreen = false
}) => {
  const [dots, setDots] = useState('')
  const [progress, setProgress] = useState(0)
  const [currentTip, setCurrentTip] = useState(0)

  const loadingTips = [
    '正在解析数据结构...',
    '正在统计战斗记录...',
    '正在分析伤害数据...',
    '正在计算职业分布...',
    '正在生成图表数据...',
    '即将完成，请稍候...'
  ]

  useEffect(() => {
    const dotsInterval = setInterval(() => {
      setDots((prevDots) => (prevDots.length < 3 ? prevDots + '.' : ''))
    }, 600)

    let progressInterval: NodeJS.Timeout
    let tipInterval: NodeJS.Timeout

    if (showProgress) {
      // 模拟进度条
      progressInterval = setInterval(() => {
        setProgress((prev) => {
          if (prev >= 95) return prev
          return prev + Math.random() * 3
        })
      }, 800)

      // 轮播提示文字
      tipInterval = setInterval(() => {
        setCurrentTip((prev) => (prev + 1) % loadingTips.length)
      }, 2000)
    }

    return () => {
      clearInterval(dotsInterval)
      if (progressInterval) clearInterval(progressInterval)
      if (tipInterval) clearInterval(tipInterval)
    }
  }, [showProgress, loadingTips.length])

  return (
    <div
      className={
        fullscreen
          ? 'fixed inset-0 flex items-center justify-center bg-gray-50'
          : 'flex flex-col items-center justify-center'
      }
    >
      <div className="rounded-lg bg-white p-6 shadow-lg">
        {/* 主标题 */}
        <div className="mb-4 text-center">
          <h2 className="text-2xl font-bold text-gray-800">
            {title}
            <span className="text-blue-500">{dots}</span>
          </h2>
          {subtitle && <p className="mt-2 text-sm text-gray-500">{subtitle}</p>}
        </div>

        {/* 加载动画 */}
        <div className="mb-4 flex justify-center">
          <div className="flex space-x-1">
            {[0, 1, 2].map((i) => (
              <div
                key={i}
                className="size-3 animate-bounce rounded-full bg-blue-500"
                style={{
                  animationDelay: `${i * 0.1}s`,
                  animationDuration: '1.4s'
                }}
              />
            ))}
          </div>
        </div>

        {showProgress && (
          <>
            {/* 进度条 */}
            <div className="mb-4">
              <div className="mb-2 flex justify-between text-sm text-gray-600">
                <span>分析进度</span>
                <span>{Math.round(progress)}%</span>
              </div>
              <div className="h-2 w-full rounded-full bg-gray-200">
                <div
                  className="h-2 rounded-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-300 ease-out"
                  style={{ width: `${progress}%` }}
                />
              </div>
            </div>

            {/* 动态提示 */}
            <div className="text-center">
              <p className="text-sm text-gray-600 transition-opacity duration-500">
                {loadingTips[currentTip]}
              </p>
            </div>
          </>
        )}

        {/* 温馨提示 */}
        <div className="mt-4 rounded-md bg-blue-50 p-3">
          <div className="flex">
            <div className="shrink-0">
              <svg
                className="size-5 text-blue-400"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fillRule="evenodd"
                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <div className="ml-3">
              <p className="text-sm text-blue-700">
                数据分析中，请耐心等待。。。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default DynamicDots
